<template>
  <el-button title="插入附件" type="info" @click="openForm()" plain icon="Paperclip"></el-button>
  <el-dialog v-model="isOpenWin" title="插入附件" width="500">
    <file_upload_box :error-handle="imgErrorHandle" :updating-handle="imgUpdatingHandle" :multiple="false"
      :success-handle="imgSuccessHandle" :max-size="500 * 1024 * 1024"
      :ex-names="['doc', 'xls', 'xlsx', 'txt', 'docx', 'xls', 'pdf', 'rar','zip','ppt','pptx','mp4','mp3']">
    </file_upload_box>
  </el-dialog>
</template>
<script setup lang="ts">
import type { DataResponse } from "@/types/commons/DataResponse";
import file_upload_box from "@/views/system/resourcefile/components/file_upload_box.vue";
import { Editor } from "@tiptap/vue-3";
import { ref } from "vue";
import notice from '@/components/msg/FarmNotice';
const props = defineProps({
  editor: {
    type: Editor,
    required: true,
  }
});
const isOpenWin = ref(false);
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>


const imgErrorHandle = (msg: { message: string }) => {
  notice.byError(msg.message);
}
const imgSuccessHandle = (response: DataResponse) => {
  const img = response.data as { id: string, filename: string, title: string };
  console.log('上传成功');
  console.log(img.filename)
  insertImg('/icon/file.png', img.title, img.id);
  isOpenWin.value = false;
}
const imgUpdatingHandle = () => {
  //alert('图片上传中...');
}


const openForm = () => {
  isOpenWin.value = true;
}



const insertImg = (src: string, title: string, fileid: string) => {
  props.editor.chain().focus().insertContent([
    {
      type: 'file', // 这里的 'file' 是您在自定义节点中定义的 name
      attrs: {
        src,
        fileid,
        text: title,
      },
    },
  ]).run();
}
const call = () => {
  openForm();
}
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
defineExpose({
  call,
});
</script>
<style scoped>
/* 样式可以根据需要添加 */
.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
}

.editor-button-bar .el-button {
  width: 32px;
  height: 32px;
  margin: 1px;
  border-color: #f4f4f5;
}

.editor-button-bar .el-dropdown {
  border: 0px solid #f4f4f5;
}
</style>
